<script lang="ts" setup>
// import { computed } from 'vue'
// import { useDesignStore } from '@/store/design'
// import { themeColor } from '@/hooks/useEchartTheme'
import { SettingItem, type SettingType } from '@/components'

// const store = useDesignStore()

// const pageConfig = computed(() => store.$state.pageConfig)

// function selectThemeColor(key: string) {
//   pageConfig.value.theme = key || 'light'
// }

// function showThemeBorderColor(key: string | number) {
//   const isSel = key === pageConfig.value.theme
//   return isSel ? (themeColor as any)[key].colors[0] : 'transparent'
// }

// function changePageBgColor(e: string | null) {
// }

const globalSetting = [
  { name: 'width', title: '画布宽度', control: 'InputNumber' },
  { name: 'height', title: '画布长度', control: 'InputNumber' },
  { name: 'color', title: '文本颜色', control: 'ColorPicker' },
  { name: 'background', title: '组件背景', control: 'UploadImage' },
  { name: 'themeColor', title: '主题色', control: 'ThemeSelect' },
] satisfies SettingType[]
</script>

<template>
  <div class="h-full">
    <SettingItem :settings="globalSetting" />
  </div>
</template>
